<template>
  <div class="status-component">
    <div
      v-for="(item, index) of statusData"
      :key="index"
      :style="{ background: item.bg }"
    >
      <i :style="{ opacity: status === item.key ? 1 : 0 }">》</i>
      <span>{{ item.key }}</span>
      <span>{{ item.value }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "BMIStatusComponent",
  props: {
    status: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      statusData: [
        { key: '分类', value: 'BMI 范围', bg: 'lightblue' },
        { key: '偏瘦', value: '<= 18.4', bg: 'gray' },
        { key: '正常', value: '18.5 ~ 23.9', bg: 'green' },
        { key: '过重', value: '24.0 ~ 27.9', bg: 'yellow' },
        { key: '肥胖', value: '>= 28.0', bg: 'orange' },
      ],
    }
  }
}
</script>

<!--
css 预处理器 | 预处理语言
less    @bg: red;
scss & sass $bg: red;
PostCSS
stylus  bg: red;
-->
<style scoped lang="less">
.status-component {
  width: 400px;

  > div {
    display: flex;
    height: 40px;
    line-height: 40px;

    i {
      width: 20%;
    }

    span {
      width: 40%;
    }
  }
}
</style>